<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>数据源管理</title>
    <!--toast-->
    <link href="../metronic/assets/global/plugins/jquery.toast.css " rel="stylesheet"/>
    <script src="../metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../metronic/assets/global/plugins/jquery.toast.min.js" type="text/javascript"></script>
    <!--bootstrap-switch-->
    <link href="../metronic/assets/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">
    <script src="../metronic/assets/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link
            href="../metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css"
            rel="stylesheet"
            type="text/css"
    />
    <link
            href="../metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css"
            rel="stylesheet"
            type="text/css"
    />
    <link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../metronic/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
    <link
            href="../metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css"
            rel="stylesheet"
            type="text/css"
    />
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="../metronic/assets/global/plugins/select2/select2.css" rel="stylesheet" type="text/css"/>
    <link
            href="../metronic/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"
            rel="stylesheet"
            type="text/css"
    />
    <!-- END PAGE LEVEL STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="../metronic/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
    <link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-table.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">
        .form-group {
            margin-bottom: 5px;
        }

        .help-inline {
            color: red;
        }

        .table {
            border-top: solid 3px #f3565d;
        }

        .table-toolbar {
            margin-bottom: 0px;
        }

        .portlet-body {
            height: 100vh;
        }

        [v-cloak]{
            display:none;
        }

    </style>
</head>
<body  class="page-header-fixed page-quick-sidebar-over-content "
      style="width: 100%; background: #0f0; background-color: transparent;">
<div id="main-container" v-cloak >
    <div class="row" style="margin-top:16px;">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet box blue-steel">
                <div class="portlet-title">
                    <div class="caption"><i class="fa fa-globe"></i>数据源管理</div>
                    <div class="actions">
                        <a class="btn btn-default btn-sm" href="javascript:;" @click="add"> <i class="fa fa-plus"></i> 新增
                        </a>
                        <a class="btn btn-default btn-sm" href="javascript:;" @click="edit"> <i class="fa fa-edit"></i> 修改
                        </a>
                        <a class="btn btn-default btn-sm" href="javascript:;" @click="del"> <i class="fa fa-remove"></i> 删除
                        </a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="table-toolbar">
                        <div class="row">
                            <div class="col-md-3">
                                <input class="form-control" id="searchTxt" placeholder="请输入关键字" type="text"/>
                            </div>
                            <div class="col-md-6">
                                <div class="btn-group">
                                    <button class="btn blue-steel" @click="search">查询 <i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table id="tb_dataList"></table>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>

    <!-- Begin添加修改modal -->
    <div aria-hidden="true" class="modal fade" id="EditContent" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button>
                    <h4 class="modal-title">数据源维护</h4>
                </div>
                <div class="modal-body">
                    <div class="scroller" data-always-visible="1" data-rail-visible1="1" style="height:300px">
                        <div class="form-horizontal form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">数据源编码</label>
                                <div class="col-md-9">
                                    <input class="form-control input-inline input-medium"
                                            v-model="dbConfig.dbKey"
                                            placeholder=""
                                            type="text"
                                    />
                                    <span class="help-inline" id="valide_dbKey"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">数据源名称</label>
                                <div class="col-md-9">
                                    <input class="form-control input-inline input-medium"
                                            v-model="dbConfig.dbMark"
                                            placeholder=""
                                            type="text"
                                    />
                                    <span class="help-inline" id="valide_dbMark"></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">数据库类型</label>
                                <div class="col-md-9">
                                    <select class="form-control input-inline input-medium"
                                            v-model="dbConfig.dbVersion">
                                        <option value="">请选择数据库类型</option>
                                        <option :value="item.code" v-for="item in dic.versionDic">{{item.name}}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">连接方式</label>
                                <div class="col-md-9">
                                    <label class="form-control-static">
                                        <input type="radio" name="optType"  v-model="dbConfig.optType" value="HOST">&nbsp;&nbsp;基本&nbsp;&nbsp;
                                    </label>
                                    <label class="form-control-static">
                                        <input type="radio" name="optType"  v-model="dbConfig.optType" value="URL">&nbsp;&nbsp;自定义&nbsp;&nbsp;
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" v-if="dbConfig.optType =='HOST'">
                                <label class="col-md-3 control-label">主机</label>
                                <div class="col-md-9">
                                    <div class="col-md-4 " style="padding-left: 0;">
                                        <input
                                                class="form-control input-inline input-small"
                                                v-model="dbConfig.dbIp"
                                                placeholder=""
                                                type="text"
                                        />
                                    </div>
                                    <div class="col-md-8" style="padding-left: 0;">
                                        <span class="help-inline" style="color: #333333">&nbsp;端口 </span>
                                        <input style="width: 58px !important; padding: 6px 6px !important;"
                                                class="form-control  input-inline input-small"
                                                placeholder=""
                                                v-model="dbConfig.dbPort"
                                                type="text"
                                        />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" v-if="dbConfig.optType =='URL'">
                                <label class="col-md-3 control-label">JDBC URL</label>
                                <div class="col-md-9">
                                    <input class="form-control input-inline input-medium"
                                            v-model="dbConfig.dbUrl"
                                            placeholder="jdbc:xx://{ip}:{port}"
                                            type="text"
                                    />
                                </div>
                            </div>
<!--################################################################################################-->
<!--################################################################################################-->
<!--################################################################################################-->
<!--                            数据库和 模式基于不同数据源适配                                           -->
<!--################################################################################################-->
<!--################################################################################################-->
                            <div class="form-group" v-if="dbConfig.optType =='HOST' && dbConfig.dbVersion !='DM8'">
                                <label class="col-md-3 control-label">数据库</label>
                                <div class="col-md-9">
                                    <div class="col-md-4 " style="padding-left: 0;">
                                        <input
                                                class="form-control input-inline input-small"
                                                v-model="dbConfig.dbName"
                                                placeholder=""
                                                type="text"
                                        />
                                    </div>
                                    <div class="col-md-8" style="padding-left: 0;" v-show="dbConfig.dbVersion =='ORACLE' ">
                                        <span class="help-inline" style="color: #333333">&nbsp;</span>
                                        <select style=" padding: 6px 6px !important;"
                                               class="form-control  input-inline "
                                               placeholder=""
                                               v-model="dbConfig.ext1"
                                               type="text"
                                        >
                                            <option value="SID">SID</option>
                                            <option value="SERVICE_NAME">服务名</option>
                                        </select>
                                    </div>
                                    <div class="col-md-8" style="padding-left: 0;" v-show="dbConfig.dbVersion !='MYSQL'
                                        && dbConfig.dbVersion !='MongoDB'
                                        && dbConfig.dbVersion !='ORACLE'
                                        && dbConfig.dbVersion !='KUDU'
                                        && dbConfig.dbVersion !=''">
                                        <span class="help-inline" style="color: #333333">&nbsp;模式 </span>
                                        <input style="width: 58px !important; padding: 6px 6px !important;"
                                               class="form-control  input-inline input-small"
                                               placeholder=""
                                               v-model="dbConfig.dbSchema"
                                               type="text"
                                        />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" v-if="dbConfig.optType =='HOST' && dbConfig.dbVersion =='DM8'">
                                <label class="col-md-3 control-label">模式</label>
                                <div class="col-md-9">
                                    <input class="form-control input-inline input-small" style="width: 80px !important; padding: 6px 6px !important;"
                                           v-model="dbConfig.dbSchema"
                                           placeholder=""
                                           type="text"
                                    />
                                </div>
                            </div>
                            <div class="form-group" v-if="dbConfig.optType =='URL'
                                        && dbConfig.dbVersion !='MYSQL'
                                        && dbConfig.dbVersion !='MongoDB'
                                        && dbConfig.dbVersion !='ORACLE'
                                        && dbConfig.dbVersion !='KUDU'
                                        && dbConfig.dbVersion !=''">
                                <label class="col-md-3 control-label">模式</label>
                                <div class="col-md-9">
                                    <input class="form-control input-inline input-small" style="width: 80px !important; padding: 6px 6px !important;"
                                           v-model="dbConfig.dbSchema"
                                           placeholder=""
                                           type="text"
                                    />
                                </div>
                            </div>

<!--################################################################################################-->
<!--################################################################################################-->
<!--################################################################################################-->
                            <div class="form-group">
                                <label class="col-md-3 control-label">用户名</label>
                                <div class="col-md-9">
                                    <input class="form-control input-inline input-medium"
                                            v-model="dbConfig.dbUser"
                                            placeholder=""
                                            type="text"
                                    />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">密码</label>
                                <div class="col-md-9">
                                    <input class="form-control input-inline input-medium"
                                            v-model="dbConfig.dbPwd"
                                            placeholder=""
                                            type="text"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn blue-steel" @click="testSource" type="button">测试连接</button>
                    <button class="btn default" data-dismiss="modal" type="button">关闭</button>
                    <button class="btn blue-steel" @click="save" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End添加修改 -->
<script src="../metronic/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"
></script>
<script
        src="../metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js"
        type="text/javascript"
></script>
<script src="../metronic/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"
        type="text/javascript"
></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../metronic/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table.js" type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-zh-CN.js"
        type="text/javascript"
></script>
<script src="../metronic/assets/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script src="../metronic/custom/commDialogs.js" type="text/javascript"></script>

<script src="../metronic/assets/vue/vue@2.js" type="text/javascript"></script>
<script src="../js/systemManager/systemDataSource.js" type="text/javascript"></script>
</body>
</html>
